<template>
  <div id="app">
      <div class="tabLeft">
        <div  ref="com" class="">
          <p @click="changeSpan">1111</p>
          <ul v-if="change == false">
            <li>编程入门</li>
              <li :class="[ show ? 'li1':'li2']" v-for="(item, index) in list" @click="showSerial(item.Serial,item)" :key="index">{{item.title}}</li>
          </ul>
          </div> 
          
      </div>
        <div ref="tabRight" class="right">
          <span :class="[ change ? 'span1': 'span2' ]" @click="changeSpan(change = !change)"></span>
          <p>{{title}}</p>
          <div class="tabRight">
            <com :text="show.content"></com>
          </div>    
        </div>
  </div>
</template>
<script>
import com from './com.vue'
export default {
  name: 'work',
  data(){
    return{
        show:{},
        change:false,
        title:'',
        list:[
            {title:'01 - HTML页面演示',content: "<p>本Java教程适合Java编程绝对零基础的学员阅读；教程采用理论与实践相结合的方式，采用一个知识点对应一个经典小案例，深入浅出；本Java教程对知识点的掌握程度进行了三个级别的描述：了解、理解、掌握，了解的内容了解一下即可，掌握的内容不但要求理解，而且能够将代码实现；强调一下，本教程比较偏向实战；通过本Java教程的学习，可以助您快速入门Java语言。</p>\n<p>在此我们先看一个简单的Java小例子：</p>\n<pre><code class=\"language-java\">public class HelloWorld {\n\tpublic static void main(String[] args) {\n\t\tSystem.out.println(&quot;半圆学社-口口相传的Java黄埔军校&quot;);\n\t}\n}\n</code></pre>\n<p>有很多学员看到这个小例子，就开始联想，我英语不是很好能学会吗？请大家不要有这样的顾虑，咱们言归正传，直奔主题吧：</p>\n<p>Java 是由 Sun Microsystems 在 1995 年首先发布的编程语言和计算平台。Java 是一项用于开发应用程序的技术，可以让 Web 变得更有意思和更实用。有许多应用程序和 Web 站点只有在安装 Java 后才能正常工作，而且这样的应用程序和 Web 站点日益增多。Java 快速、安全、可靠。从笔记本电脑到数据中心，从游戏控制台到科学超级计算机，从手机到互联网，Java 无处不在！</p>\n<p><img src=\"http://by-courses.oss-cn-hangzhou.aliyuncs.com/JavaSE/01.%E5%88%9D%E8%AF%86Java/image/1557479798@abd4156a36b86ed03a5c1b30fea81246.png\" alt=\"\" /></p>\n",count:0},
            {title:'02 - 如何开始',content:"<p>预备知识------教程采用理论与实践相结合的方式，采用一个知识点对应一个经典小案例，深入浅出；本Java教程对知识点的掌握程度进行了三个级别的描述：了解、理解、掌握，了解的内容了解一下即可，掌握的内容不但要求理解，而且能够将代码实现；强调一下，本教程比较偏向实战；通过本Java教程的学习，可以助您快速入门Java语言。</p>\n<p>在此我们先看一个简单的Java小例子：</p>\n<pre><code class=\"language-java\">public class HelloWorld {\n\tpublic static void main(String[] args) {\n\t\tSystem.out.println(&quot;半圆学社-口口相传的Java黄埔军校&quot;);\n\t}\n}\n</code></pre>\n<p>有很多学员看到这个小例子，就开始联想，我英语不是很好能学会吗？请大家不要有这样的顾虑，咱们言归正传，直奔主题吧：</p>\n<p>Java 是由 Sun Microsystems 在 1995 年首先发布的编程语言和计算平台。Java 是一项用于开发应用程序的技术，可以让 Web 变得更有意思和更实用。有许多应用程序和 Web 站点只有在安装 Java 后才能正常工作，而且这样的应用程序和 Web 站点日益增多。Java 快速、安全、可靠。从笔记本电脑到数据中心，从游戏控制台到科学超级计算机，从手机到互联网，Java 无处不在！</p>\n<p><img src=\"http://by-courses.oss-cn-hangzhou.aliyuncs.com/JavaSE/01.%E5%88%9D%E8%AF%86Java/image/1557479798@abd4156a36b86ed03a5c1b30fea81246.png\" alt=\"\" /></p>\n",count:1},
            {title:'03 - 开始便携HTML页面',content:"<p>第一个程序------教程采用理论与实践相结合的方式，采用一个知识点对应一个经典小案例，深入浅出；本Java教程对知识点的掌握程度进行了三个级别的描述：了解、理解、掌握，了解的内容了解一下即可，掌握的内容不但要求理解，而且能够将代码实现；强调一下，本教程比较偏向实战；通过本Java教程的学习，可以助您快速入门Java语言。</p>\n<p>在此我们先看一个简单的Java小例子：</p>\n<pre><code class=\"language-java\">public class HelloWorld {\n\tpublic static void main(String[] args) {\n\t\tSystem.out.println(&quot;半圆学社-口口相传的Java黄埔军校&quot;);\n\t}\n}\n</code></pre>\n<p>有很多学员看到这个小例子，就开始联想，我英语不是很好能学会吗？请大家不要有这样的顾虑，咱们言归正传，直奔主题吧：</p>\n<p>Java 是由 Sun Microsystems 在 1995 年首先发布的编程语言和计算平台。Java 是一项用于开发应用程序的技术，可以让 Web 变得更有意思和更实用。有许多应用程序和 Web 站点只有在安装 Java 后才能正常工作，而且这样的应用程序和 Web 站点日益增多。Java 快速、安全、可靠。从笔记本电脑到数据中心，从游戏控制台到科学超级计算机，从手机到互联网，Java 无处不在！</p>\n<p><img src=\"http://by-courses.oss-cn-hangzhou.aliyuncs.com/JavaSE/01.%E5%88%9D%E8%AF%86Java/image/1557479798@abd4156a36b86ed03a5c1b30fea81246.png\" alt=\"\" /></p>\n",count:2},
            {title:'04 - 开始标记',content:'four',count:3},
            {title:'05 - 插入图片',content:'five',count:4},
            {title:'06 - 超链接',content:'six',count:5},
        ],
    }
  },
  components: { com },
  created(){
    this.title = this.list[0].title;
    this.show = this.list[0];
    console.log(this.show)
  },
  methods:{
      changeSpan(change){
        this.change = change;
        this.$refs.tabRight.style.width = '100%';
      },
      showSerial(name,item){
        console.log(name)
          this.show = item;
          this.title = item.title;
      }
  }
}
</script>
<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#app{
    width: 100%;
    height: 700px;
    background: #141c3b;
    color: #cdcdcd;
    font-size: 14px;
    display: flex;
}
 span{
    cursor: pointer;
    display: block;
    width: 0;
    height: 0;
    border-top: 9px transparent solid;
    border-bottom: 9px transparent solid;
    border-right: 11px solid #fff;
    position: absolute;
    left: 4%;
    top: 2%;
}
.span1 {
    transform: translate(0, -50%);
}
.span2 {
    transform: translate(0, -50%) rotate(180deg);
}
.tabLeft li{
    height: 50px;
    width: 160px;
    line-height: 30px;
    margin-left: 30px;
    list-style: none;
}
.li1{
    color: #fff;
}
.li2{
    color: #cdcdcd;
}
.tabLeft li:first-child{
    font-size: 20px;
    position: absolute;
    top:20px;
}
.tabLeft ul{
    width: 16%;
    height: 700px;
    padding: 0;
    padding-top: 90px ;
    position: relative;
}

.right{
    width: 80%;
    height: 700px;
    position: relative;
}
.tabRight{
    width: 94%;
    height: 650px;
    background: #fff;
    float: left;
    margin: 10px 30px 30px;
    position: relative;
}
p{
  text-align: center;
  line-height: 20px;
}

</style>
